<template>
    <div>
    <EmailVerify v-show="!verify_pass" @changeVerifyPass="changeVerifyPass"/>
    <div v-show="verify_pass" class="register-box">
      <div class="back-nav">
          <van-icon name="arrow-left" @click="onClickLeft"/>
      </div>  
      <div class="title">{{title}}</div>
      <div class="sub-title">{{subTitle}}</div>

       <div class="gender-box" v-show="step === 1">
        <div v-for="(item, index) in genderList" @click="changeGender(item, index)" :key="item.id">
        <div :class="(genderIndex === index) && genderIndex === 0 ? 'gender-item gender-item1' : (genderIndex === index) && genderIndex === 1  ? 'gender-item gender-item2' : 'gender-item'">
            <div class="img">
            <img style="width: 64px;border-radius: 50%;" :src="item.avatar" />
            </div>
            <div class="name">{{item.name}}</div>
        </div>
        </div>
     </div> 

     <div class="info-box" v-show="step === 2">
         <div class="avatar">
             <van-uploader :before-read="beforeRead" v-model="avatarList" accept="image/*" :max-count="1" />
         </div>
         <div class="info-item">
             <div class="label">昵称</div>
             <div class="value">
                <van-field v-model="nick_name" placeholder="请填写昵称" />
             </div>
         </div>
          <div class="info-item">
            <div class="label">个性签名</div>
            <div class="value">
                <van-field v-model="signature" type="textarea"  rows="1"
                 autosize placeholder="请填写个性签名" />  
            </div>
         </div>
     </div>

     <div class="next">
        <div class="icon" v-if="step === 1">
            <!--  <van-icon v-if="step === 2" name="arrow-left" @click="changeStep(-1)"/> -->
            <van-icon name="arrow" @click="changeStep(1)"/>  
        </div>
        <div class="submit" v-if="step === 2">
           <van-button round type="primary" 
           style="padding: 0 30px;font-size: 14px" 
           color="#28AE61" size="small"
           @click="toRegister">
           提&nbsp;&nbsp;&nbsp;&nbsp;交
           </van-button>
        </div>
     </div>   
    </div>
</div>
</template>
<script lang="ts" setup>
type Info = {
   email: string;
   avatar: string;
   gender: number | null; 
   nick_name: string;
   signature?: string;
}
import { ref, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import EmailVerify from './components/emailVerify.vue'
import { Toast } from 'vant';
import { uploadFile, appRegister } from '@/api/common'

const router = useRouter();

const genderList = [
    {id: 1, name: '我是男生', avatar: new URL('../../assets/images/boy.png', import.meta.url).href},
    {id: 2, name: '我是女生', avatar: new URL('../../assets/images/girl.png', import.meta.url).href},
]

const info = reactive<Info>({
    email: '',
    avatar: '',
    gender: null,
    nick_name: '',
    signature: '',
})

const step = ref<number>(1)
const verify_pass = ref<boolean>(false)
const title = ref<string>('性别选择')
const subTitle = ref<string>('性别确定后无法再进行更改')
const genderIndex = ref<number>()
const avatarList = ref<any[]>([])
const clicked = ref<boolean>(false)

let { email, avatar, gender, nick_name, signature } = toRefs(info)

const changeGender = (item: any, index: number) => {
    genderIndex.value = index
    gender.value = item.id
}

const changeStep = (data: number) => {
    if(!gender.value) {
        Toast('请选择性别')
        return
    }
    step.value = step.value + data
    if(step.value === 1) {
        title.value = '性别选择'
        subTitle.value = '性别确定后无法再进行更改'
    }else {
        title.value = '完善资料'
        subTitle.value = '对个人信息进行进一步完善'
    }
}

const changeVerifyPass = (value: string) => {
    email.value = value
    verify_pass.value = true
}

const onClickLeft = () => {
    if(step.value === 1) {
        verify_pass.value = false
    }else {
        step.value = 1
    }
}

const beforeRead = (file: any) => {
    if (!['image/jpeg','image/png'].includes(file.type)) {
      Toast('请上传 jpg或png 格式图片');
      return false;
    }
    if(file.size > 1024 * 10) {
      Toast('图片大小不能超过10M');
      return false;
    }
    return true;
};

const toRegister = async () => {
    if(avatarList.value.length === 0) {
        Toast('请上传头像')
        return 
    }
    if(!nick_name.value) {
        Toast('请填写昵称')
        return
    }
    const rsp = await toUploadAvatar()
    if(rsp.code === 0) {
        avatar.value = rsp.data.path
        submitRegister()
    }else {
        Toast('头像上传失败')
        avatarList.value = []
    }
}

const submitRegister = async () => {
    if(clicked.value) {
        return
    }
    clicked.value = true
    const rsp = await appRegister(info, { loading: false })
    if(rsp.code === 0) {
        Toast.success('注册成功')
        router.push('/login')
    }
     clicked.value = false
}

const toUploadAvatar = async () => {
    const params = {
        single: 1, 
        category: 'avatar'
    }
    const formData = new FormData();
    formData.append('file', avatarList.value[0].file);
    const rsp = await uploadFile(params, formData, { loading: false })
    return rsp
}

</script>
<style lang="less">
.avatar {
    .van-uploader__upload {
        border-radius: 50%;
    }
}
</style>
<style lang="less" scoped>
.register-box {
    padding: 30px 20px;
    .back-nav {
      margin-bottom: 30px;
    }
    .title {
      color: #333;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 1px;
      margin-left: 10px;
    }
    .sub-title {
      margin: 10px 0 0 10px;
      color: #999;
      font-size: 12px;
    }
    .gender-box {
        margin: 30px 0;
        padding: 0 10px;
        .gender-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            border-radius: 5px;
            justify-content: space-between;
            margin-bottom: 30px;
            box-shadow: 3px 3px 3px #f5f5f5;
            .name {
                font-weight: 700;
            }
        }
        .gender-item1 {
            border: 2px solid #66ACFC;
            border-radius: 5px;
            box-shadow: none;
        }
        .gender-item2 {
            border: 2px solid #F7C1BE;
            border-radius: 5px;
            box-shadow: none;
        }
    }

    .info-box {
        margin: 30px 0 30px 0;
        .avatar {
          text-align: center;
        }
        .info-item {
            margin-bottom: 10px;
          .label {
            margin-left: 10px;
            color: #999;
            font-size: 13px;
            margin-bottom: 10px;
          } 
          .value {
            margin-left: -5px;
            border-bottom: 1px solid #f5f5f5;
          } 
        }
    }

    .next {
      text-align: center;
      margin-top: 100px;
      position: relative;
      .icon { 
          width: 20px;
          height: 20px;
          padding: 10px;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 3px 3px #cfcfcf;
      }
    }
}
</style>